import {
  ComposableMenu,
  DeleteDialog,
  DocumentObject,
  IContextMenu,
  MenuItemCopy,
  MenuItemPaste,
  MenuItemSetWorkobject,
  RenameDialog,
  useClipboard,
  useCtx2,
} from '@amcax/base';
import { useMemoizedFn } from 'ahooks';
import { useEffect, useState } from 'react';
import { MenuItemChangeSketchPlane } from './change-sketch-plane';
import { MenuItemDelete } from './delete';
import { ContextMenuEvents } from './events';
import { MenuItemFitSelectedObjects } from './fit-selected-objects';
import { RelationsDialog } from './RelationsDialog';
import { MenuItemRename } from './rename';
import { MenuItemShowRelations } from './show-relations';
import { MenuItemHide, MenuItemShow } from './visibility-menu-items';

export const CMenu = ({ id }: { id: string }) => {
  const clipBoardData = useClipboard();
  const { userEvents } = useCtx2();

  const [currentDocumentObject, setCurrentDocumentObject] =
    useState<DocumentObject | null>(null);
  const [deleteObjects, setDeleteObjects] = useState<DocumentObject[]>([]);
  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
  const [relationsDialogOpen, setRelationsDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const onShowDeleteDialog = useMemoizedFn(
    (documentObjects: DocumentObject[]) => {
      setDeleteObjects(documentObjects);
      setDeleteDialogOpen(true);
    },
  );

  const onRename = useMemoizedFn((documentObject: DocumentObject) => {
    setCurrentDocumentObject(documentObject);
    setRenameDialogOpen(true);
  });

  const onShowRelations = useMemoizedFn((documentObject: DocumentObject) => {
    setCurrentDocumentObject(documentObject);
    setRelationsDialogOpen(true);
  });

  useEffect(() => {
    userEvents
      .on(ContextMenuEvents.ShowDeleteOutlinkDialog, onShowDeleteDialog)
      .on(ContextMenuEvents.Rename, onRename)
      .on(ContextMenuEvents.ShowRelations, onShowRelations);
    return () => {
      userEvents
        .off(ContextMenuEvents.ShowDeleteOutlinkDialog, onShowDeleteDialog)
        .off(ContextMenuEvents.Rename, onRename)
        .off(ContextMenuEvents.ShowRelations, onShowRelations);
    };
  }, []);

  return (
    <>
      <ComposableMenu
        id={id}
        menuItems={[
          MenuItemRename,
          MenuItemHide,
          MenuItemShow,
          MenuItemFitSelectedObjects,
          MenuItemCopy,
          MenuItemPaste,
          MenuItemShowRelations,
          MenuItemChangeSketchPlane,
          MenuItemDelete,
          MenuItemSetWorkobject,
        ]}
        environmentData={{ clipBoardData }}
      />
      <RenameDialog
        open={renameDialogOpen}
        onClose={() => setRenameDialogOpen(false)}
        documentObject={currentDocumentObject}
      />
      <RelationsDialog
        open={relationsDialogOpen}
        onClose={() => setRelationsDialogOpen(false)}
        documentObject={currentDocumentObject}
      />
      <DeleteDialog
        open={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        documentObject={deleteObjects}
      />
    </>
  );
};

export const DefaultContextMenu: IContextMenu = {
  id: 'defaultContextMenu',
  render: (id: string) => (
    <CMenu
      id={id}
      key={`$common_document_objects_tree_context_menu_${id}`}
    />
  ),
};
